<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 姓名 -->
      <el-table-column label="姓名">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top">
            <template #default>
              <div>username: {{ scope.row.username }}</div>
              <div>type: {{ scope.row.type }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.username }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <!-- 请假理由 -->
      <el-table-column label="请假理由">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.leavereason }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 开始时间 -->
      <el-table-column label="开始时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{
              proxy.$filters.timeFormat(scope.row.start)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 结束时间 -->
      <el-table-column label="结束时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{
              proxy.$filters.timeFormat(scope.row.end)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 附件 -->
      <el-table-column label="附件">
        <template #default="scope">
          <el-image
            v-if="scope.row.extend"
            style="width: 100px; height: 100px"
            :src="'api/' + scope.row.extend.split(',')[0]"
            :preview-src-list="scope.row.extend.split(',').map((item:any)=>'api/'+item)"
            :initial-index="4"
            :preview-teleported="true"
            fit="cover"
          />
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="状态">
        <template #default="scope">
          <div v-if="scope.row.type == 1">
            <el-button size="small" type="success" @click="change(scope.row, 2)"
              >同意</el-button
            >
            <el-button size="small" type="danger" @click="change(scope.row, 0)"
              >不太行</el-button
            >
          </div>
          <div v-else>
            <el-button
              size="small"
              :type="scope.row.type == 0 ? 'danger' : 'success'"
              >{{ scope.row.type == 0 ? "不太行" : "已同意" }}</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-pagination
      :page-size="pagesize"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { leavelist, changetype } from "@/service/leaveService";
import { ref, onBeforeMount, getCurrentInstance, reactive } from "vue";
const { proxy }: any = getCurrentInstance();
let pagesize = ref(5); //每页显示5条数据
let total = ref(100); //数据总数
let pageIndex = ref(1); //默认是第一页
let pageChange = (index: number) => {
  pageIndex.value = index; //需要重新的请求数据
  search();
};
let search = async () => {
  //一个查询方法
  const { data } = await leavelist({
    shownum: pagesize.value,
    pageindex: pageIndex.value,
  }); //直接就查询了所有数据 //我们需要分页
  if (data.code == 200) {
    tableData.value = data.list;
    total.value = data.total;
    console.log(data);
  }
};
onBeforeMount(async () => {
  const { data } = await leavelist({
    shownum: pagesize.value,
    pageindex: pageIndex.value,
  }); //直接就查询了所有数据
  if (data.code == 200) {
    total.value = data.total;
    tableData.value = data.list;
  }
});

const change = async (row: any, type: any) => {
  const { data } = await changetype({ _id: row._id, type: type });
  if (data.code == 200) {
    row.type = type;
  }
};

let tableData: any = ref([]);
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
